<!DOCTYPE html>
<html>
<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Demo</title>
  <link href="../layui-v2.9.0/layui/css/layui.css" rel="stylesheet">
  <script src="../layui-v2.9.0/layui/layui.js"></script>

</head>
<body>


<style>
  .demo-reg-container{width: 320px; margin: 21px auto 0;}
  .demo-reg-other .layui-icon{position: relative; display: inline-block; margin: 0 2px; top: 2px; font-size: 26px;}
  .main_div{
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    height: 100vh; /* 或者你需要的任何高度，以使容器填充整个视口高度 */
    text-align: center;
  }
  h2 {
    font-size: 40px;
    transition-duration: 1s;
    font-weight: 200;
    text-align: center;
  }
</style>
<div class="main_div">
  <form class="layui-form" >
    <div class="demo-reg-container">
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
          </div>
          <h2>Welcome</h2>
        </div>
      </div>
      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-username"></i>
          </div>
          <input type="text" name="userName" value="" lay-verify="required" placeholder="昵称" autocomplete="off" class="layui-input" lay-affix="clear">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="password" value="" lay-verify="required" placeholder="密码" autocomplete="off" class="layui-input" id="reg-password" lay-affix="eye">
        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-password"></i>
          </div>
          <input type="password" name="confirmPassword" value="" lay-verify="required|confirmPassword" placeholder="确认密码" autocomplete="off" class="layui-input" lay-affix="eye">
        </div>
      </div>


      <div class="layui-form-item">
        <div class="layui-row">
          <div class="layui-col-xs8">
            <div class="layui-input-wrap">
              <div class="layui-input-prefix">
                <i class="layui-icon layui-icon-email"></i>
              </div>
              <input type="text" name="email" value="" lay-verify="required|email" placeholder="邮箱" lay-reqtext="请填写邮箱" autocomplete="off" class="layui-input" id="reg-email">
            </div>
          </div>
          <div class="layui-col-xs4">
            <div >
              <button type="button" class="layui-btn layui-btn-fluid layui-btn-primary" lay-on="reg-get-vercode">获取验证码</button>
            </div>
          </div>

        </div>
      </div>

      <div class="layui-form-item">
        <div class="layui-input-wrap">
          <div class="layui-input-prefix">
            <i class="layui-icon layui-icon-vercode"></i>
          </div>
          <input type="text" name="vercode" value="" lay-verify="required" placeholder="验证码" lay-reqtext="请填写验证码" autocomplete="off" class="layui-input">
        </div>
      </div>


      <div class="layui-form-item">
        <input type="checkbox" name="agreement" lay-verify="required" lay-skin="primary" title="同意">
        <a href="javascript:void(0)" style="position: relative; top: 6px; left: -15px;" lay-on="test-iframe-curl">
          <ins>用户协议</ins>
        </a>
      </div>

      <div class="layui-form-item">
        <button class="layui-btn layui-btn-fluid" lay-submit lay-filter="demo-reg">注册</button>
      </div>
      <div class="layui-form-item demo-reg-other">
        <a href="/user/loginHtml">登录已有帐号</a>
      </div>
    </div>
  </form>
</div>

<script>
  layui.use(function(){
    var $ = layui.$;
    var form = layui.form;
    var layer = layui.layer;
    var util = layui.util;
    util.on('lay-on',{
      'test-iframe-curl': function() {
        layer.open({
          type: 2,
          title: '用户隐私',
          shadeClose: true,
          maxmin: true, //开启最大化最小化按钮
          area: ['800px', '500px'],
          content: '/private/privateMessage'
        });
      }
    })

    // 自定义验证规则
    //包括邮箱格式验证，两次密码验证
    form.verify({
      // 确认两次密码
      confirmPassword: function(value, item){
        var passwordValue = $('#reg-password').val();
        if(value !== passwordValue){
          return '两次密码输入不一致';
        }
      },
      //邮箱验证
      email: function (value,item){
        var pattern = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
        let flag = 0;
        var domains= ["qq.com","163.com","vip.163.com","263.net","yeah.net","sohu.com","sina.cn","sina.com","eyou.com","gmail.com","hotmail.com","42du.cn"];
        if(pattern.test(value)) {
          var domain = value.substring(value.indexOf("@")+1);
          console.log(domain);
          for(var i = 0; i< domains.length; i++) {
            if(domain === domains[i]) {
              flag = 1;
            }
          }
        }
        if(!flag)
          return '当前邮箱格式错误';
      }

    });

    // 提交事件
    form.on('submit(demo-reg)', function(data){
      var field = data.field; // 获取表单字段值

      // 是否勾选同意
      if(!field.agreement){
        layer.msg('您必须勾选同意用户协议才能注册');
        return false;
      }

      // 显示填写结果，仅作演示用
      layer.alert(JSON.stringify(field), {
        title: '当前填写的字段值'
      });

      // 此处可执行 Ajax 等操作
      // …
      $.ajax({
          url: '/user/registerUser',
          type: 'POST',
          data: field,
          success: function(response){
            // 处理响应
            layer.msg(response);
            if(response==="注册成功") {
              setTimeout(function() {
                window.location.href = "/loginHtml";
              }, 1500);
            }
          },

      });

      return false; // 阻止默认 form 跳转
    });


    util.on('lay-on', {
      // 获取验证码
      'reg-get-vercode': function(){
        var isvalid = form.validate('#reg-email'); // 主动触发验证，v2.7.0 新增
        // 验证通过
        if(isvalid){
          // 此处可继续书写「发送验证码」等后续逻辑
          // …
          var email = document.getElementById("reg-email").value;
          console.log(email);
          $.ajax({
            url: '/sendEmail',
            type: 'POST',
            data: {email: email},

            success: function(response){
              // 处理响应
              layer.msg(response);
            },
            error: function(){
              layer.msg("发送失败");
            }
          });
        } else {
          layer.msg('邮箱格式验证失败');
        }
      }
    });

  });

</script>
<script src="../js/index.js"> </script>
</body>
</html>